<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fullPage</title>
    <link rel="stylesheet" href="./css/fullPage.css">
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <script src="./js/jquery.min.js"></script>
    <script type="text/javascript" src="./js/jquery.fullPage.min.js"></script>

</head>
<body>
<div id="dv">
    <div class="section first">
        <div class="scene"></div>
        <div class="wrapper">
            <div class="row row--h-center">
                <div class="col-8">
                    <h1>
                        THIS IS A CLASSROOM</h1>
                    <p>
                        In-Depth. Innovative. Interactive. Immersive.</p>
                </div>
            </div>
        </div>
    </div>
    <div class="section second">
        <div class="scene"></div>
        <div class="wrapper">
            <div class="row row--h-center">
                <div class="col-8">
                    <h2>
                        One ocean connects us</h2>
                    <p>
                        Our mission is to provide learners, the next generation of ocean citizens, with the knowledge and tools to understand our influence on the ocean and the ocean’s influence on us.</p>
                </div>
            </div>
        </div>
    </div>
    <div class="section">3</div>
    <div class="section">4</div>
    <div class="section">5</div>
</div>
<script>
    $(function () {
        $('#dv').fullpage({
            sectionsColor: ['red', 'orange', 'yellow', 'blue', 'green'],
            afterLoad: function (anchorLink, i) {
                $('.section').removeClass('current');
                $('.section').eq(i - 1).addClass('current');
            },
        })
    })
</script>
</body>
</html>